<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滴答办公系统-学员列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
<script src="media/js/jquery.min.js"></script>
<style type="text/css">
  td > .layui-table-cell{
      height:48px;
      line-height: 48px;
  }
</style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-xs3" style="margin-right: 20px">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <input type="text" id="name" class="layui-input" placeholder="学生姓名">
                </div>
            </div>
        </div>
        <div class="layui-col-xs3" style="margin-right: 20px">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">班级：</label>
                <div class="layui-input-block">
                    <select class="layui-input" id="class_id">
                        <option value="1">JAVA1805班</option>
                        <option value="2">JAVA1806班</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs2">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="search">
                      <i class="layui-icon layui-icon-search"></i>
                      <span style="position: relative; bottom: 1px;">搜索</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-col-xs2">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn layui-btn-mini layui-btn-mini" href="/emp/student/getStudentsListExcel" lay-event="detail">导出Excel</a>
                </div>
            </div>
        </div>
    </div>
</div>
	
	<div class="layui-container">
    
    <table class="layui-table" id="layui_table_id" lay-filter="dataTable1"></table>
    
	</div>
	
	<script src="media/layui/layui.js"></script>
  
  <script type="text/html" id="operate">
    <a class="layui-btn layui-btn-mini" href="studentupdate.html?id={{d.id}}">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-mini" href="studentdetails.html?id={{d.id}}" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteStudent({{d.id}})">删除</a>
  </script>
	
	<script type="text/javascript">
    layui.use('table', function() {
      var table = layui.table;
    
      //第一个实例
      table.render({
        id: "dataTable1",
        elem: '#layui_table_id',
        height: 454,
        url: '/emp/student/getStudentsList', //数据接口
        page: true,
        limit: 10,
        contentType: "application/x-www-form-urlencoded",
        method: 'post',
        cols: [
          [ //表头
            {
              field: 'no',
              title: '学号',
              width: 130,
              align: 'center',
              sort: true
            }, {
              field: 'name',
              title: '姓名',
              width: 120,
              align: 'center'
            }, {
              field: 'class_name',
              title: '班级',
              width: 140,
              align: 'center'
            }, {
              field: 'sex',
              title: '性别',
              width: 120,
              align: 'center'
            }, {
              field: 'phone',
              title: '手机号',
              width: 120,
              align: 'center'
            }, {
              field: 'email',
              title: '邮箱',
              width: 212,
              align: 'center'
            }, {
              title: '操作',
              width: 290,
              align: 'center',
              templet: '#operate'
            }
          ]
        ]
      });
      
      $('#search').click(function () {
        var name = $('#name').val();
        var class_id = $('#class_id').val();
        
        if(name == "" && class_id == -1) {
            alert("请检查搜索信息！");
        }else {
          table.reload('dataTable1', {
            url: '/emp/student/searchStudents'
            ,methods:"post"
            ,request: {
              pageName: 'page', //页码的参数名称，默认：page
              limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            ,where: {
              name: name,
              class_id: class_id
            }
            ,page: {
              curr: 1
            }
          });
        }
      })
    });
    
    
        
    function init() {
      $.ajax({
        url: "/emp/classes/getAllClasses",
        type: "POST",
        dataType: "json",
        data: {}, //提交表单的数据
        success: function(res) {
          var options = "<option value=\"-1\">选择搜索班级</option>";
         for(var i = 0; i < res.classesLists.length; i++) {
           options += "<option value='" + res.classesLists[i].id + "'>" + res.classesLists[i].class_name + "</option>";
         }
         $('#class_id').empty();
         $("#class_id").append(options);
         
         // form.render();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
    }
    
    init();
    
    /*用户-删除*/
    function deleteStudent(id) {
      layer.confirm('确认要删除吗？', function() {
        $.ajax({
          method: "POST",
          url: "/emp/student/delStudent",
          data: {
            id: id
          }, //提交表单的数据
          success: function(res) {
           window.location.reload();
          },
          error: function() {
            layer.close(loading);
            layer.msg('操作失败', {
              icon: 2
            });
          }
        });
      });
    }
	</script>
	
	
</body>
</html>